<template>
  <div style="text-align: left">
    <el-form label-position="top" :rules="sms_login_rules" label-width="80px" :model="loginForm">
      <el-form-item label="手机号：" prop="mobile">
        <el-input v-model="loginForm.mobile" placeholder="请输入手机号"></el-input>
      </el-form-item>
      <el-form-item label="验证码：" prop="validate_code">
        <el-input v-model="loginForm.validate_code"
                  style="width: 350px;"
                  placeholder="请输入验证码"></el-input>
        <el-button @click="sendSms" style="float: right">发送验证码</el-button>
      </el-form-item>
      <el-form-item label="">
        <el-button @click="login" v-if="authType === 'login'" style="width: 100%;color: white;background-color: #122147">登录</el-button>
        <el-button @click="register" v-if="authType === 'register'" style="width: 100%;color: white;background-color: #122147">注册</el-button>
      </el-form-item>
      <el-form-item label="第三方登录：" class="third_party_login">
<!--          <el-image :src="require('../assets/images/weibo.jpg')" style="width: 30px;height: 30px;" alt=""/>-->
<!--          <el-image :src="require('../assets/images/weixin.jpg')" style="width: 30px;height: 30px;" alt=""/>-->
        <span>
          <img :src="require('../assets/images/weixin.jpg')" style="width: 30px;height: 30px;margin-right: 30px;cursor: pointer" alt="">
        </span>
        <span>
<!--          @click="weiboLogin"-->
          <a
            href="https://api.weibo.com/oauth2/authorize?client_id=839991271&response_type=code&redirect_uri=http://www.childrenwear.com:8000/oauth">
            <img :src="require('../assets/images/weibo.png')" style="width: 30px;height: 30px;cursor: pointer" alt="">
          </a>
        </span>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { sendSms, register, login, getUser, weiboLogin } from '../api/index'
export default {
  name: 'SmsLogin',
  data () {
    const checkPhone = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('手机号不能为空'));
      } else {
        const reg = /^1[3|4|5|7|8][0-9]\d{8}$/
        // console.log(reg.test(value));
        if (reg.test(value)) {
          callback();
        } else {
          return callback(new Error('请输入正确的手机号'));
        }
      }
    }
    return {
      loginForm: {
        mobile: '',
        validate_code: ''
      },
      sms_login_rules: {
        mobile: [
          { validator: checkPhone, trigger: 'blur' }
        ],
        validate_code: [
          { required: true, message: '验证码不能为空', trigger: 'blur' }
        ]
      },
      authType: 'login'
    }
  },
  methods: {
    sendSms () {
      // 发送短信验证码，同时获取到认证的类型（登录/注册）
      sendSms(this.loginForm.mobile).then(({ data }) => {
        if (data.code !== 0) {
          this.$message.error(data.msg)
          return
        }
        // 判断认证的类型（登录或者注册）
        if (data.data !== null && data.data === '登录') {
          this.authType = 'login'
        } else if (data.data !== null && data.data === '注册') {
          this.authType = 'register'
        }
      }).catch((res) => {
        console.log(res)
      })
    },
    login () {
      // 登录
      login(this.loginForm.mobile, this.loginForm.validate_code).then(({ data }) => {
        if (data.code === 0) {
          // 登录成功
          this.$message.success(data.data)
          // 更新用户的信息
          getUser().then(({ data }) => {
            this.$store.state.user = data.data
          })
          this.$router.push({ path: '/' })
        }
      }).catch((res) => {
        console.log(res)
      })
    },
    register () {
      // 注册
      register(this.loginForm.mobile, this.loginForm.validate_code).then(({ data }) => {
        if (data.code === 0) {
          // 注册成功，切换到登录界面
          this.authType = 'login'
        } else {
          this.$message(data.msg)
        }
      }).catch((res) => {
        console.log(res)
      })
    },
    weiboLogin () {
      // 微博登录
      weiboLogin().then(({ data }) => {
        console.log(data)
      }).catch((res) => {
        console.log(res)
      })
    }
  }
}
</script>

<style scoped lang="less">
</style>
